<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        .ddd{
            background-color: #74a9b2;
            height: 900px;
            width: 900px;
        }
    </style>
</head>
<!--
onclick：鼠标单击
onblur：元素失去焦点
onfocus：元素获得焦点
onmouseover:鼠标移到某元素之上
onmouseout:鼠标从某元素移开
onchange:域的内容被改变
onsubmit：表单提交
onload:页面加载
-->
<body>
<div class="ddd" id = "ddd" tabindex="0" onmouseover="change_color()" onmouseout="change_color2()"></div>


</body>
<script>
    function change_color () {
        document.getElementById("ddd").style.backgroundColor="#0000FF";
    }
    function change_color2 () {
        document.getElementById("ddd").style.backgroundColor="#00ecff";
    }
</script>
</html>